<template>
  <div class="register">
    <Header title="找回密码"></Header>
    <div v-mx v-mt>
      <Field v-model="phone" placeholder="请输入手机号码或用户名" />
      <Field v-mt v-model="vailCode" placeholder="请输入验证码" >
        <div slot="addon"  v-ml >
         <Button v-px="12" v-py="12"
          is-send-code
          :sendPhoneNo="phone"
          type="primary" round/>
        </div>
      </Field>
      <Button @click="next" v-my class="register-btn" type="primary" block round>下一步</Button>
    </div>
  </div>
</template>
<script>
import Header from "../components/Header.vue";
import Field from "../components/Field.vue";
import Button from "../components/Button.vue";
import { isEmpty } from "lodash";
export default {
  name: 'ForgetPassword',
  data(){
    return {
      phone: '',
      vailCode: '',
      
    }
  },
  components: {
    Header,
    Field,
    Button
  },
  methods: {
    _vaildate(){
      if (isEmpty(this.phone)) {
        return "手机号码不能为空";
      }
      if (!/1[3578]\d{9}$/.test(this.phone)) {
        return "手机号码格式不正确";
      }
      if (isEmpty(this.vailCode)) {
        return "验证码不能为空";
      }
    },
    next(){
      console.log(this.$route)
      const err = this._vaildate()
      if (err) {
        alert(err);
        return
      }
      this.$router.push({
        path: '/reset-password',
        query: {
          phone: this.phone,
          code: this.vailCode,
          from: this.$route.name
        }
      })
    }
  }
};
</script>

